<template>
	<view class="index_box">
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="2000" duration="500" indicator-color="#999999" indicator-active-color="#FFCD00">
			<swiper-item v-for="(item,index) in productMasterDiagram" v-if="item">
				<view class="swiper-item uni-bg-red"><image :src="item"></image></view>
			</swiper-item>
		</swiper>
		<view class="attractions_box">
			<view class="block1">
				<view class="tit"><text>{{productName}}</text></view>
			</view>
			<view class="comment_block1 dis_fx fx_column fx_between">
				<text v-if="grade==1">太差了！</text>
				<text v-if="grade==2">比较一般！</text>
				<text v-if="grade==3">挺好的！</text>
				<text v-if="grade==4">太棒了！</text>
				<text v-if="grade==5">非常棒的体验！</text>
				<view class="dis_fx fx_column">
					<view class="star cur" @click="updateGrade(1)"></view>
					<view class="star" :class="grade>=2?'cur':''" @click="updateGrade(2)"></view>
					<view class="star" :class="grade>=3?'cur':''" @click="updateGrade(3)"></view>
					<view class="star" :class="grade>=4?'cur':''" @click="updateGrade(4)"></view>
					<view class="star" :class="grade==5?'cur':''" @click="updateGrade(5)"></view>
				</view>
			</view>
			<view class="comment_block2">
				<textarea v-model="contents" placeholder="分享一下您的出行体验吧！" placeholder-style="color:#C6C6C6"></textarea>
				<view class="upload_box dis_fx fx_between fx_bottom">
					<view class="dis_fx">
						<view class="add_img btn" @click="chooseImg"><view class="icon"></view><text>添加图片</text></view>
						<view class="add_video btn" @click="chooseVadio"><view class="icon"></view><text>添加视频</text></view>
					</view>
					<view class="num">0/200</view>
				</view>
			</view>
		</view>
		<view class="comment_btn" @click="subComment">发布</view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				productName:'',
				productMasterDiagram:[],
				orderId:'',
				orderNo:'',
				grade:5,
				contents:'',
				fileList:[]
			}
		},
		onLoad(options){
			var orderId=options.orderId;
			var orderNo=options.orderNo;
			var productName=options.productName;
			var productMasterDiagram=options.productMasterDiagram;
			if(orderId && orderNo){
				this.orderId=orderId;
				this.orderNo=orderNo;
				this.productName=productName;
				this.productMasterDiagram=productMasterDiagram.split(',');
			}
		},
		methods: {
			//发布评价
			subComment(){
				var that=this;
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				uni.uploadFile({
					url: util.serviceTarget+'/order/comments', //仅为示例，非真实的接口地址
					name:"fileList",
					filePath:that.fileList[0].uri,
					files:that.fileList,
					header: {
						enctype:'multipart/form-data',
						'token': 'c9cd2dcc-1d65-4363-a0eb-624dd7bbef2d'
						},
					formData: {    //HTTP 请求中其他额外的 form data
						orderId:that.orderId,
						orderNo:that.orderNo,
						grade:that.grade,
						contents:that.contents,
						fileList:that.fileList
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						uni.showToast({
							title:"评论成功",
							icon:"success",
							duration:1500,
							success:function(){
								// that.toNewPage('/pages/order/myOrder/myOrder')
								uni.navigateBack({
									delta: 1
								});
							}
						})
						
					}
				});
				uni.hideLoading();
			},
			//选择图片
			chooseImg(){
				var that=this;
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function (res) {
						for(let i in res.tempFiles){
							var fileList=that.fileList;
							fileList.push({name:"fileList",uri:res.tempFiles[i].path})
						}
					}
				});
			},
			//选择视频
			chooseVadio(){
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function (res) {
						for(let i in res.tempFiles){
							var fileList=that.fileList;
							fileList.push({name:"fileList",uri:res.tempFiles[i].path})
						}
					}
				});
			},
			//评分
			updateGrade(grade){
				this.grade=grade;
			},
			toNewPage (url) {
				uni.navigateTo({
					url
				})
			}
			
		}
	}
</script>

<style>
	.index_box swiper,.index_box swiper image{
		width: 100%;
		height: 354upx;
	}
	.attractions_box{
		padding: 0 24upx 200upx;
	}
	.attractions_box .block1 .tit text{
		color: #333;
		font-size: 28upx;
		width: 533upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.comment_block1{
		box-shadow: 0 0 18px 0 rgba(106, 79, 13, 0.12);
		margin: 50upx 0 50upx;
		padding: 0 24upx;
		height: 150upx;
	}
	.comment_block1 text{
		font-size: 36upx;
		color: #333;
	}
	.comment_block1 .star{
		background: url() no-repeat center/contain;
		width: 36upx;
		height: 36upx;
		margin-left: 30upx;
	}
	.comment_block1 .star.cur{
		background-image: url();
	}
	.comment_block2{
		background: #F6F6F6;
		padding: 30upx 24upx;
		border-radius: 10upx;
	}
	.comment_block2 textarea{
		font-size: 28upx;
		width: 100%;
		height: 210upx;
		line-height: 30upx;
	}
	.comment_block2 .upload_box .btn{
		border: 1px dashed #ddd;
		width: 200upx;
		height: 200upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #C6C6C6;
		margin-right: 25upx;
	}
	.comment_block2 .upload_box .btn.add_img .icon{
		background: url() no-repeat center/contain;
		width: 50upx;
		height: 45upx;
	}
	.comment_block2 .upload_box .btn.add_video .icon{
		background: url() no-repeat center/contain;
		width: 50upx;
		height: 40upx;
	}
	.comment_block2 .upload_box .btn .icon{
		margin-bottom: 10upx;
	}
	.comment_block2 .num{
		font-size: 24upx;
		color: #C6C6C6;
	}
	.comment_btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		font-size: 36upx;
		color: #444648;
		background: #FFC800;
		text-align: center;
	}
</style>
